<template >
	<div>
		<!-- 视频播放 -->
		<video :src="mvVideo.url" autoplay controls loop vslide-gesture-in-fullscreen show-loading
			:vslide-gesture="true" objectFit="fill" class="video"></video>
		<!-- 视频详情 -->
		<div class="detail">
			<div class="title">{{mvDetail.name}}</div>
			<div class="author">{{mvDetail.artistName}}</div>
			<div class="formCount">
				{{formatCount(mvDetail.duration)}}次播放 - {{mvDetail.publishTime}}
			</div>
		</div>
		<!-- 推荐视频 -->
		<div class="titles">推荐视频</div>
		<block v-for="(item,index) in mvLists" :key="index">
			<div class="related">
				<div class="related-left">
					<image :src="item.coverUrl"></image>
					<!-- 播放量 -->
					<div class="amountPlay">
						<image src="../../static/images/icons/play_icon.png"></image>
						<div class="videoNum">{{formatCount(item.playTime)}}</div>
					</div>
				</div>
				<div class="related-right">
					<div class="info">{{item.title}}</div>
					<div class="authorss">{{item.creator[0].userName}}</div>
				</div>
			</div>
		</block>
	</div>
</template>

<script>
	import { mapGetters } from 'vuex';
	import { formatCount } from '../../utils/formatCount.js';
	export default {
		data() {
			return {
			}
		},
		computed:{
			...mapGetters(['mvDetail', 'mvVideo', 'mvLists'])
		},
		onLoad(options) {
			this.$store.dispatch('video/fetchMvDeatil', options.id)
			this.$store.dispatch('video/fetchMvVideo', options.id)
			this.$store.dispatch('video/fetchMvLists', options.id)
		},
		methods: {
			formatCount
		}
	}
</script>


<style lang="scss" scoped>
	.video {
		width: 100%;
		position: fixed;
		// top: 88rpx;
	}
	
	.detail {
		padding: 12upx 20upx;
		color: #939393;
		font-size: 26upx;
		padding-top: 470upx;
		.title {
			font-weight: 700;
			font-size: 32upx;
			color: #333;
			padding-bottom: 6upx;
			width: 100%;
			display: -webkit-box;
			overflow: hidden;
			text-overflow: ellipsis;
			word-wrap: break-word;
			white-space: normal !important;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
		.author {
			padding-bottom: 6upx;
		}
	}
	
	.titles {
		padding: 12upx 20upx;
	}
	.related {
		height: 200upx;
		padding: 12upx 20upx;
		display: flex;
	
		.related-left {
			position: relative;
			z-index: -9;
			image {
				width: 300upx;
				height: 180upx;
				border-radius: 12upx;
			}
			.amountPlay {
				display: flex;
				align-items: center;
				position: absolute;
				bottom: 26upx;
				right: 10upx;
				image {
					width: 32upx;
					height: 24upx;
					border-radius: 0;
				}
				.videoNum {
					color: #fff;
					font-size: 24upx;
					padding-left: 12upx;
				}
			}
		}
		.related-right {
			width: 100%;
			padding-left: 30upx;
			display: flex;
			flex-direction: column;
			.info {
				width: 88%;
				font-weight: 700;
				font-size: 30upx;
				display: -webkit-box;
				overflow: hidden;
				text-overflow: ellipsis;
				word-wrap: break-word;
				white-space: normal !important;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
			.authorss {
				padding-top: 20upx;
				color: #6a6a6a;
				font-size: 26upx;
			}
		}
	}
	
</style>
